<template>
  <div>
    <!-- 预览文件pdf： <input type="text" v-model="pdf" /> -->
    <vue-office-pdf :src="pdf" @rendered="renderedHandler" @error="errorHandler" />
  </div>
</template>

<script>
//引入VueOfficePdf组件
import VueOfficePdf from "@vue-office/pdf"

export default {
  components: {
    VueOfficePdf
  },
  data() {
    return {
      pdf: "http://static.shanhuxueyuan.com/test.pdf" //设置文档地址
    }
  },
  props: ["file"],
  created() {
    this.changeFile()
  },
  watch: {
    file() {
      this.changeFile()
    }
  },
  methods: {
    changeFile() {
      this.pdf = this.file
    },
    renderedHandler() {
      console.log("渲染完成")
    },
    errorHandler() {
      console.log("渲染失败")
    }
  }
}
</script>
